<template>
  <div class="ly-customer">
    <div class="ly-search">
      <div class="ly-li">
        <span class="ly-label">业务员编号</span>
        <input type="text" class="ly-input" v-model="search.id" placeholder="请填写业务员编号"/>
      </div>
      <div class="ly-li">
        <span class="ly-label">业务员姓名</span>
        <input type="text" class="ly-input" v-model="search.name" placeholder="请填写业务员姓名"/>
      </div>
      <div class="ly-li">
        <span class="ly-label">业务员电话</span>
        <input type="text" class="ly-input" v-model="search.phone" placeholder="请填写业务员电话"/>
      </div>
      <div class="ly-li">
        <span class="ly-label">联系邮箱</span>
        <input type="text" class="ly-input" v-model="search.email" placeholder="请填写邮箱"/>
      </div>
      <div class="ly-btn">搜索</div>
    </div>
    <div class="ly-table">
      <el-table :data="tableData" style="width: 100%" :max-height="maxHeight" border>
        <el-table-column fixed prop="date" label="序号" width="100"></el-table-column>
        <el-table-column prop="name" label="业务员编号" width="160"></el-table-column>
        <el-table-column prop="province" label="业务员姓名" width="120"></el-table-column>
        <el-table-column prop="city" label="业务员电话" ></el-table-column>
        <el-table-column prop="address" label="联系邮箱" ></el-table-column>
        <el-table-column fixed="right" label="操作" width="160">
          <template slot-scope="scope">
<!--            <span class="ly-btn" @click="getMore(scope.$index,tableData)">取消关联</span>-->
            <span class="ly-btn ly-add" @click="setSalesman(scope.$index,tableData)">关联业务员</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <prompt :prompt="codeContent" @getdata="cancelOrder"></prompt>
    <listPage :pageData="pageList" v-if="pageList.totalRecNum >  pageList.pageSize" @getdata="setPageNo"></listPage>
  </div>
</template>

<script>
  export default {
    name: "selasman",
    data() {
      return {
        pageList: {
          page: 1, //当前页
          totalRecNum: 300,   //总页数
          pageSize: 25  // 分页条数
        }, // 分页
        maxHeight: 500,
        search: {
          time: '',
          email: '',
          name: '全部',
          client: '微信'
        },
        client: [
          {
            value: 'null',
            label: '全部'
          }, {
            value: 'weixin',
            label: '微信'
          }, {
            value: 'qq',
            label: 'QQ'
          }, {
            value: 'xinlang',
            label: '新浪'
          }, {
            value: 'apple',
            label: 'apple'
          }],
        tableData: [
          {
            date: '201',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '201602',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '20104',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2011',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '20108',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '20106',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2003',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '20162',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2014',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '20161',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016508',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '20166',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '20160507',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }]
      }
    },
    methods: {
      changeClient(e) {
        console.log(e)
      },
      // 查看详情
      getMore(val, rows) {
        console.log(rows[val].date)
        // 如果客户信息全部返回 使用缓存显示 (优先)
        this.$store.commit('updateCustomerInfoData', rows[val])
        // 客户信息不全，使用id 进行接口查询
        this.$router.push('/details/' + rows[val].date)
      },
      // 获取到的 pageNo
      setPageNo(val) {
        this.pageList.page = val
        // 请求 page页的数据
      },
      // 获取屏幕高度 给tbale设置最大高度
      getHeight() {
        let vm = this, height = 0
        height = document.documentElement.clientHeight - 265
        vm.maxHeight = height
      },
      // 关联业务员
      setSalesman(){

      }
    },
    created() {
      this.getHeight()
    }
  }
</script>

<style scoped lang="scss">
.ly-search{
  .ly-li{
    padding-left: 65px;
    .ly-label{
      width: 60px;
    }
  }
}
  .ly-table{
    .ly-add{
      &.ly-btn{
        border: 1px solid #608bf5;
        color: #0a6cd6;
        transition: .3s;
        &:hover{
          border: 1px solid #0a6cd6;
          color: #608bf5;
        }
      }
    }
  }
</style>